<template>
    <div>
        <div>
            <select v-model="selectedProvince" @change="onChangeProvince">
                <option disabled value="">请选择省份</option>
                <option v-for="province in provinces" :key="province.provinceName">{{ province.provinceName }}</option>
            </select>
            <select v-model="selectedCity" @change="onChangeCity">
                <option disabled value="">请选择城市</option>
                <option v-for="city in cities" :key="city.cityName">{{ city.cityName }}</option>
            </select>
            <select v-model="selectedDistrict" @change="log">
                <option disabled value="">请选择区县</option>
                <option v-for="(district, index) in districts" :key=index>{{ district.districtName }}</option>
            </select>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [],
            provinces: [], // 所有省份数据
            cities: [], // 当前选中的省份下的所有城市数据
            districts: [], // 当前选中的城市下的所有区县数据
            selectedProvince: '', // 当前选中的省份名称
            selectedCity: '', // 当前选中的城市名称
            selectedDistrict: '', // 当前选中的区县名称
        };
    },
    mounted() {
        // 加载省市区数据
        this.loadProvinces();
    },
    methods: {
        loadProvinces() {
            this.$axios({
                url: this.$api.areaList,
                method: 'get'
            }).then(res => {
                this.data = res.rows
                const provs = this.data
                // console.log(provs);
                let i = 0
                const result = provs.reduce((sum, now) => {
                    let province = sum.find(p => p.provinceName === now.provinceName);
                    if (!province) {
                        province = {
                            provinceName: now.provinceName,
                            cities: [],
                        }
                        sum.push(province)
                    }
                    let city = province.cities.find(c => c.cityName === now.cityName)
                    if (!city) {
                        city = {
                            cityName: now.cityName,
                            districts: [],

                        }
                        province.cities.push(city)
                    }
                    // let district = province.cities.districts.find(d => d.name === now.name)
                    // if(!district){
                    //     district = {
                    //         name: now.name
                    //     }
                    //     province.cities.districts.push(district)
                    // }
                    city.districts.push({
                        districtName: now.name
                    })
                    return sum
                }, [])
                // console.log(result);
                // const result = provs.reduce((prev, curr) => {
                //     let province = prev.find(p => p.provinceName === curr.provinceName);
                //     if (!province) {
                //         province = {
                //             provinceName: curr.provinceName,
                //             cities: []
                //         };
                //         prev.push(province);
                //     }

                //     let city = province.cities.find(c => c.cityName === curr.cityName);
                //     if (!city) {
                //         city = {
                //             cityName: curr.cityName,
                //             districts: []
                //         };
                //         province.cities.push(city);
                //     }

                //     city.districts.push({
                //         districtName: curr.name
                //     });

                //     return prev;
                // }, []);

                this.provinces = result;

            })

            // 加载省市区数据的代码，例如从后端获取数据并赋值给 this.provinces
        },
        onChangeProvince() {
            // 根据选中的省份更新城市选项

            const province = this.provinces.find(p => p.provinceName === this.selectedProvince)
            this.cities = province?province.cities : []
            this.selectedCity = '',
            this.selectedDistrict = ''

            // const province = this.provinces.find(p => p.provinceName === this.selectedProvince);
            // this.cities = province ? province.cities : [];
            // this.selectedCity = '';
            // this.selectedDistrict = '';
        },
        onChangeCity() {
            // 根据选中的城市更新区县选项
            const city = this.cities.find(c => c.cityName === this.selectedCity);
            this.districts = city ? city.districts : [];
            this.selectedDistrict = '';

        },
        log() {
            console.log(
                "省份:" + this.selectedProvince + '/' +
                "城市:" + this.selectedCity + '/' +
                "地区:" + this.selectedDistrict
            );
        }
    },

}
</script>

<style lang="scss" scoped></style>